<template>
  <div class="coursePublished">
    <div v-if="!getCourses.length" style="margin-top: 20px">
      暂无已发布课程！
    </div>
    <div class="coursesList">
      <!-- <div v-for="(item, index) in getCourses" :key="index"> -->
      <!-- <h2>{{ item.cName }}</h2> -->
      <el-row class="item-list">
        <el-col
          :xs="11"
          :sm="7"
          :md="7"
          :lg="5"
          :xl="5"
          v-for="(citem, cindex) in getCourses"
          :key="cindex"
          class="coursesContent hover_boxShadow_defaut"
          :class="{
            twoisLast: !((cindex + 1) % 2),
            treeisLast: !((cindex + 1) % 3),
            fourisLast: !((cindex + 1) % 4),
          }"
          :title="citem.name"
          @click.native="handleJumpRoute(citem)"
        >
          <div class="coursesImg">
            <img v-lazy="citem.iconPath" />
          </div>
          <div class="courseInfo">
            <div class="name">
              {{ citem.name || "【缺课程名称】" | filterName }}
            </div>
            <div class="courseDesc">
              设计：{{ filterUserName(citem.mainDesignerUserID) }}
            </div>
            <div class="desc">简介：{{ citem.description || "无" }}</div>
            <div class="time">
              发布时间：{{
                citem.lastUpdatedTime || "【发布时间】" | filterTime
              }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getDesigncourselist } from "@/request/designcourse";
import { mapState } from "vuex";
import { location, renderTimeToYMD, currTime } from "@/util/tool";
export default {
  data() {
    return {
      src: [
        // require('@/assets/images/defaultCoursePic1.svg'),
        // require('@/assets/images/defaultCoursePic2.svg'),
        // require('@/assets/images/defaultCoursePic3.svg'),
        // require('@/assets/images/defaultCoursePic4.svg'),
        // require('@/assets/images/defaultCoursePic5.svg'),
        // require('@/assets/images/defaultCoursePic6.svg'),
        // require('@/assets/images/defaultCoursePic7.svg'),
        // require('@/assets/images/defaultCoursePic8.svg'),
        // require('@/assets/images/defaultCoursePic9.svg'),
        // require('@/assets/images/defaultCoursePic10.svg'),
        // require('@/assets/images/defaultCoursePic11.svg'),
      ],
      coursesData: [],
      location: location(window),
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userList: (state) => state.user.userList,
      publishedCourses: (state) => state.courses.publishedCourses
    }),
    filterUserName: () => {
      return function (val) {
        const findUser = this.userList.find((item) => item.userID === val);
        return !findUser
          ? val
          : findUser.realName ||
              findUser.nickName ||
              findUser.email ||
              findUser.regName;
      };
    },
    getCourses() {
      let data = JSON.parse(JSON.stringify(this.publishedCourses))
      data.sort((a, b) => {
            let t_1 = new Date(a.lastUpdatedTime).getTime();
            let t_2 = new Date(b.lastUpdatedTime).getTime();
            return t_2 - t_1;
          });
      return data
    }
  },
  filters: {
    filterName(value) {
      return value.substring(
        0,
        value.lastIndexOf("_") == -1 ? value.length : value.lastIndexOf("_")
      );
    },
    filterTime(val) {
      const time = new Date(val);
      return renderTimeToYMD(time) + ' ' + currTime(time);
    },
  },
  created() {
    if (!this.userList.length) this.$store.dispatch("user/getUserList");
    this.fetchCoursesList();
  },
  methods: {
    // 获取所有课程
    fetchCoursesList() {
      this.$store.dispatch("courses/fetchDesignCourses", {that: this})
      // getDesigncourselist().then((data) => {
      //   if (data) {
      //     data = data?.filter(
      //       (item) =>
      //         (item.state == "已发布" || item.state == "已提交") &&
      //         [43, 44, 48].indexOf(item.courseID) == -1
      //     );
      //     // 过滤他人的课程 一般是后端过滤
      //     data = data?.filter(
      //       (item) => item.mainDesignerUserID === this.userInfo.userID
      //     );
      //     data.sort((a, b) => {
      //       let t_1 = new Date(a.lastUpdatedTime).getTime();
      //       let t_2 = new Date(b.lastUpdatedTime).getTime();
      //       return t_2 - t_1;
      //     });
      //     this.coursesData = data;
      //   } else {
      //     this.$antdMessage.error({
      //       content: "获取已发布课程失败",
      //     });
      //   }
      // });
    },
    handleJumpRoute(citem) {
      this.$router.push({
        name: "Creativeourse",
        query: {
          courseID: citem.courseID,
        },
        params: { id: citem.courseID },
      });
    },
  },
  mounted() {},
};
</script>

<style lang="stylus">
$boderColor = solid 1px #b7b2b2;

.coursePublished {
  // padding-top: 20px;
  margin: 0 auto;
  max-width: 1200px;

  .coursesList {
    .item-list {
      display: flex;
      flex-flow: wrap;

      @media only screen and (min-width: 1200px) {
        .el-col-lg-5 {
          margin-right: calc(((1200px - (273px * 4)) / 3));
          margin-bottom: 25px;
        }

        .fourisLast {
          margin: 0;
        }
      }

      @media only screen and (max-width: 1200px) and (min-width: 768px) {
        .el-col-md-7 {
          margin-right: calc((calc(100%) / 3 / 3 / 2));
          margin-bottom: 25px;
        }

        .coursesContent {
          max-width: 273px;

          .coursesImg {
            img {
              width: 100% !important;
            }
          }
        }

        .treeisLast {
          margin: 0;
        }
      }

      @media only screen and (max-width: 767px) {
        .el-col-xs-11 {
          margin-right: calc((calc(100%) / 2 / 2 / 2 / 1.5));
          margin-bottom: 20px;
        }

        .twoisLast {
          margin-right: 0 !important;
        }
      }

      .coursesContent {
        padding: 11px 14px 0 15px;
        margin-right: 20px;
        margin-top: 25px;
        position: relative;
        cursor: pointer;
        width: 273px;
        height: 340px;
        background-color: #ffffff;
        // box-shadow: 0px 8px 16px 0px rgba(79, 111, 139, 0.16);
        // border: $boderColor;
        border-radius: 5px;
        overflow: hidden;
        transition: all 0.2s linear;

        .coursesImg {
          line-height: 0;

          img {
            object-fit: cover;
            width: 244px;
            height: 156px;
            border-radius: 5px;
          }
        }

        .courseInfo {
          .name {
            margin-top: 15px;
            font-family: PMingLiU-ExtB;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .pushTime {
            margin-top: 5px;
            font-family: PMingLiU-ExtB;
            font-size: 12px;
            color: #999999;
          }

          .desc {
            margin-top: 9px;
            // height: 39px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #666666;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>